<template>
  <el-card
    class="chart-item-container"
    :body-style="{ padding: 0 }"
    shadow="never"
  >
    <template #header>
      <div class="text-bold">出厂检完成率</div>
    </template>
    <div ref="WaterPoloChart" class="chart-item"></div>
  </el-card>
</template>

<script>
import itemChartMixins from './mixins/item-charts-mixins'
export default {
  name: 'WaterPoloChart',
  mixins: [itemChartMixins],
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.$echarts.dispose(this.getInstance(this.$refs.fullYearApiChart))
  },
  methods: {
    init() {
      const option = {
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 10
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 15,
              itemStyle: {
                borderWidth: 10
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 40,
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      }
      this.getInstance(this.$refs.WaterPoloChart).setOption(option)
    },
    updateChart() {
      this.getInstance(this.$refs.WaterPoloChart).resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-item-container {
  width: 100%;
  height: 445px;
  .chart-item {
    height: 410px;
  }
}
</style>
